<template>
  <el-dialog
    :title="title"
    v-model="dialogVisible"
    width="700px"
  >
    <el-form
      :model="ruleForm"
      :rules="rules"
      ref="ruleFormRef"
      label-width="120px"
    >
      <el-form-item
        label="菜单名称"
        prop="name"
      >
        <el-input v-model="ruleForm.name" />
      </el-form-item>
      <el-form-item
        label="菜单key"
        prop="code"
      >
        <el-input
          v-model="ruleForm.code"
          placeholder="菜单key请保持唯一"
        />
      </el-form-item>
      <el-form-item
        label="菜单路径"
        prop="path"
      >
        <el-input
          v-model="ruleForm.path"
          placeholder="如：/system/menu"
        />
      </el-form-item>
      <el-form-item
        label="页面文件路径"
        prop="uri"
      >
        <el-radio-group
          v-model="componentType"
          @change="toggleComponentType"
        >
          <el-radio :label="0">页面</el-radio>
          <el-radio :label="1">布局</el-radio>
        </el-radio-group>
        <el-input
          v-if="!componentType"
          v-model="ruleForm.uri"
          placeholder="xxx/index"
        >
          <template #prepend>
            @/views/
          </template>
          <template #append>
            .vue(.jsx)
          </template>
        </el-input>
        <el-select
          v-else
          v-model="ruleForm.uri"
          placeholder="请选择布局类型"
          style="display: block;"
        >
          <el-option
            label="基础布局(Layout)"
            value="Layout"
          >
          </el-option>
          <el-option
            label="分享页面(Share)"
            value="Share"
          >
          </el-option>
          <el-option
            label="空白页面(Blank)"
            value="Blank"
          />
          <el-option
            label="无顶栏(NoTop)"
            value="NoTop"
          />
        </el-select>
      </el-form-item>
      <el-form-item
        label="显示在导航栏"
        prop="hidden"
      >
        <el-switch
          v-model="ruleForm.hidden"
          active-text="显示"
          inactive-text="隐藏"
          :active-value="false"
          :inactive-value="true"
        >
        </el-switch>
      </el-form-item>
      <el-form-item
        label="重定向"
        prop="redirect"
      >
        <el-input v-model="ruleForm.redirect" />
      </el-form-item>
      <el-form-item
        label="选中菜单"
        prop="activeMenu"
      >
        <el-input v-model="ruleForm.activeMenu" />
      </el-form-item>
      <el-form-item
        label="图标"
        prop="icon"
      >
        <el-input v-model="ruleForm.icon" />
      </el-form-item>
      <el-form-item
        label="缓存页面"
        prop="keepAlive"
      >
        <el-radio
          v-model="ruleForm.keepAlive"
          :label="true"
        >是</el-radio>
        <el-radio
          v-model="ruleForm.keepAlive"
          :label="false"
        >否</el-radio>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="close">取 消</el-button>
        <el-button
          type="primary"
          @click="submit"
        >
          确 定
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script>
import { defineComponent, watch, ref } from 'vue'
import { createMenu, editMenu } from '@/api/system'
import useEditDialog from '@/hooks/useEditDialog'

export default defineComponent({
  name: 'MenuEditDialog',
  emits: ['update-list'],
  setup(props, { emit }) {
    const DEFAULT_FORM = {
      code: '', // router.name
      name: '', // router.meta.title
      orderNum: 0, // 排序
      hidden: false, // 是否在导航栏上隐藏
      parentId: '0', // 父级节点 0 为根目录
      path: '', // router.path
      redirect: '', // router.redirect 重定向
      uri: '', // router.component
      keepAlive: false, // 是否缓存该页面
      activeMenu: '',  // 选中的菜单
      icon: '' // 图标
    }

    const rules = {
      // 表单校验规则
      name: [{ required: true, message: '请输入菜单名称', trigger: 'blur' }],
      code: [{ required: true, message: '请输入菜单key', trigger: 'blur' }],
      // path: [ { required: true, message: '请输入菜单路径', trigger: 'blur' } ],
      uri: [{ required: true, message: '请输入页面文件路径', trigger: 'blur' }]
    }
    const componentType = ref(0) // 区别component是Layout还是views

    // 切换component类型
    const toggleComponentType = (type) => {
      ruleForm.value.uri = type ? 'Layout' : ''
    }

    const { dialogVisible, title, ruleForm, ruleFormRef, open, close, submit } = useEditDialog({
      createApi: createMenu,
      editApi: editMenu,
      defaultForm: DEFAULT_FORM,
      emit
    })
    watch(dialogVisible, () => {
      // componentType.value =
      // ruleForm.value.uri === 'Layout' || ruleForm.value.uri === 'Share' ? 1 : 0 // 初始化布局选择
      componentType.value = ['Layout', 'Submenu','Share', 'Blank', 'NoTop'].includes(ruleForm.value.uri)
        ? 1
        : 0 // 初始化布局选择
    })

    return {
      ruleFormRef,
      ruleForm,
      rules,
      dialogVisible,
      title,
      componentType,
      toggleComponentType,
      open,
      close,
      submit
    }
  }
})
</script>
